<template>
   <div>
       <img :src="User.headphoto" class="headphoto" v-if="User" >

       <div class="naviBox">
         <button v-for="item in NaviData" :key="item.id" class="NaviOne" @click="SETNAVI(item.id)" :style="getStyle(item.id,item.color)">
          <img :src="require('@/assets/default/message/' + item.src)" class="icon">
          <div>{{item.label}}</div>
        </button>
       </div>

       <div id="Fun" class="flex">
          <div v-for="item in FunData" :key="item.id" class="box flex" @click="beforeSubmit(item)">
              <img :src="require('@/assets/default/message/'+item.src)" class="icon">
          </div>
       </div>
   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
         ...mapState('Login',['User']),
         ...mapState('Chat',['NaviState']),
     },
      data() {
            return {
               NaviData:[
                  {id:1,src:'Message.png',label:'消息',color:'orange'},
                  {id:2,src:'Friend.png',label:'好友',color:'orange'},
                  {id:3,src:'Group.png',label:'群聊',color:'#9BC6FC'},
                  {id:4,src:'Planet.png',label:'星球',color:'#00DFD5'}
               ],
               FunData:[
                  {id:1,src:'Setting.png',click:null},
                  {id:2,src:'Home.png',click:this.toHomePage}
               ]
            }
         },
     methods:{
       ...mapMutations('Chat',['SETNAVI']),
       getStyle(id,color){
          if(id == this.NaviState)
          return{color,fontWeight:600}
       },
       beforeSubmit(fun){
         if(fun.click == null) return this.$message.warning('功能暂未实现')
         fun.click()
       },
       toHomePage(){
         this.$router.push('/home')
       }
     }
  }
</script>
<style scoped lang='less'>
.headphoto{
   border-radius: 5px;
}
.icon{
      width: 30px;
      height: 30px;
}

.naviBox{
   width: 100%;
   height: 100%;
}
// 导航
.NaviOne{
   width: 100%;
   font-size: 18px;
   margin-top: 15px;

  div{
    letter-spacing: 0;
  }
}
#Fun{
   width: 100%;
   flex-wrap: wrap;
  .box{
     width: 100%;
     margin: 5px 0;
  }
   .icon{
      width: 30px;
      height: 30px;
   }
}

</style>